const num:number=100
console.log(num);


// 类型注解：限定变量的类型
let str:string=''
let isGirl:boolean=true

let arr:number[]=[1,2,3,4]
let arr2:string[]=['1','2','3']
let arr3:Array<boolean>=[true,false,false,true]


// 联合类型
let sex:'男'|'女'='女'

let arr4:(string|number)[]=[1,2,3,'5','6']
let arr5:Array<number|boolean>=[1,2,3,true]

// 类型别名：用type关键字给写起来比较复杂的类型起一个其他的名字 用来简化和复用类型

type t1=(string|number)[]

let arr6:t1=[1,2,'3']

// 函数类型

function fn1(x:number,y:number):number{
  return x+y
}


let sum:number
sum=fn1(1,2)

// 函数表达式

let fn2=(a:number,b:number):number=>{
  return a+b
}
let sum2:number
sum2=fn2(1,2)

type fn3=(a:number,b:number)=>number

let add1:fn3=(a,b)=>{
  return a+b
}

console.log(add1(1,2))

console.log(add1(5,6))

// 类型别名
type person={
 name:string
 age:number
 sex:'男'|'女'
 phone:string
}

const xtb:person={
  name:'xiaotibai',
  age:40,
  sex:'男',
  phone:'110'
}

// type:交叉类型 模拟继承

type student=person&{
  score:number
  subject:string
}

const xyx:student={
  name:'xiaoyuxuan',
  age:9,
  sex:'女',
  phone:'120',
  score:100,
  subject:'Math'
}

// 同名interface会合并
interface item{
  name:string
  age:number
}

interface item{
  sex:'男'|'女'
}

const ben:item={
  name:"xtb",
  age:40,
  sex:'男'
}

// 同名type会报错

// type animal={
//   style:string
//   from:string
// }

// type animal={
//   color:string
// }


type date={
  title:string
  content:string
}

type response={
  code:string
  msg:string
  data:date
}

const  result:response={
  code:'2001',
  msg:'success',
  data:{
    title:'美国大选',
    content:'特郞普以277张选举人票赢得美国大选'
  }
}
console.log(result.data.content)

// 字面量类型
let pi:3.14

num:pi=3.14

let Pos:'上'|'下'|'左'|'右'

pos:Pos='下'

type gender='男'|'女'

let xinbie:gender='男'

type Color='红'|'绿'|'蓝'|'黑'

let fontColor:Color='绿'

type Prop={
  type:'正常'|'危险'|'警告'|'成功'
}

let prop1:Prop={type:'成功'}

// 常量 与 字面量 的区别

let str1='123'//str1的类型是：string
const str2='456'// str2的类型是：'456'

// 泛型

/*     数据1                      数据2
    {                             {
       code:1001                      code:1002
       msg:'成功'                      msg:'成功'
       data:{                          data:{
           name:"xtb"                      id:1001
           age:20                          price:20
       }                                }
    }                             }
 
 */

    // 数据1的结构
interface personItem{
  name:string
  age:number
}

interface result1{
    code:number
    msg:string
    data:personItem
}

    // 数据2的结构
    interface goodsItem{
      id:number
      price:number
    }

    interface result2{
      code:number
      msg:string
      data:goodsItem
    }

    // 把data属性的值 定义为一个泛型
    // 在接口类型的名称后面使用一个<T>就可以声明一个泛型参数 
    //  接口里的其他成员都能使用这个参数的类型
    interface result<T>{
      code:number
      msg:string
      data:T
    }

    // 找到可变的类型部份 通过泛型<T>抽象成为泛型参数 
    // 在使用泛型的时候 把具体类型传入到泛型参数位置
    const res1:result<personItem>={
      code:1001,
      msg:"success",
      data:{
        name:"xtb",
        age:40
      }
    }

    const res2:result<goodsItem>={
      code:1002,
      msg:"error",
      data:{
        id:102,
        price:120
      }
    }

    // 泛型别名
    type Response<T>={
      code:number
      msg:string
      data:T
    }

   const response1:Response<personItem>={
        code:404,
        msg:"成功",
        data:{
          name:"xtb",
          age:40
        }
   }

   const reponse2:Response<goodsItem>={
    code:200,
    msg:'失败',
    data:{
      id:100,
      price:99
    }
   }

  //  泛型函数

  function fun1<T>(length:number,value:T){
    let arr=[]
    for(let i=0;i<length;i++){
      arr[i]=value
    }

    return arr
  }

fun1<string>(10,'abc')
fun1<personItem>(5,{name:'xtb',age:10})

// 泛型约束

type myLength={
  length:number
}

function fun3<T extends myLength>(obj:T){
  return obj.length
}

fun3([1,2,3,4])
fun3('1234')
// fun3(12334)

// 练习

type itemFresh={
  count:number
  time:string
}
 
const list:itemFresh[]=JSON.parse(localStorage.getItem('refreshCount')||'[]') 
let lastItem=list[list.length-1]
 list.push({
    count:(lastItem?(lastItem.count+1):1),
    time:new Date().toLocaleTimeString()
  }
)
console.log(list)

let app=document.querySelector("#app") as HTMLDivElement
app.innerHTML=list.map(item=>`刷新次数为:${item.count},刷新时间为:${item.time}`).join("<br>")

localStorage.setItem('refreshCount',JSON.stringify(list))